<template>
  <bd-popup
    popupId="qualificationFriPopup"
    :weights="4"
    v-model:show="props.show"
    :style="{
      overflow: 'initial',
      width: '80%',
      'background-color': 'transparent',
    }"
    zIndex="999999"
    teleport="body"
    :close-on-click-overlay="false"
  >
    <div class="box">
      <div class="box-top items-center">
        <img class="box-top-img" src="/image/gth-yellow.svg" />
        <div class="box-top-title">{{ $t("lotteryMoney.zwzgtc_title") }}</div>
      </div>

      <div class="box-center">
        <div class="box-center-title">
          {{ $t("lotteryMoney.zwzgtc_title1") }}
        </div>
        <div class="box-center-desc items-center">
          <img
            class="box-center-desc-icon"
            src="/image/title-yellow-icon.svg"
          />
          {{ $t("lotteryMoney.zwzgtc_text1") }}
        </div>
        <div class="box-center-desc items-center" style="margin-bottom: 0">
          <img
            class="box-center-desc-icon"
            src="/image/title-yellow-icon.svg"
          />
          {{ $t("lotteryMoney.zwzgtc_text2").replace("xxx", "1") }}
        </div>
      </div>
      <!-- 资格 -->
      <div class="box-bottom items-center">
        <img
          v-if="isZg"
          class="box-bottom-img"
          src="/image/correct-green.svg"
        />
        <img v-else class="box-bottom-img" src="/image/error-grey.svg" />
        <div class="box-bottom-text">
          {{ $t(isZg ? "lotteryMoney.zwzgtc_yzg" : "lotteryMoney.zwzgtc_wzg") }}
        </div>
      </div>
      <!-- 确认 -->
      <div class="box-footer items-center">
        <div class="box-footer-item" @click.stop="confirm">
          {{ $t("lotteryMoney.yqhy") }}
        </div>
      </div>
    </div>
    <!-- 关闭 -->
    <img
      class="close"
      src="/image/close-fff-icon.svg"
      @click.stop="closePopup"
    />
  </bd-popup>
</template>

<script setup lang="ts" name="qualificationFriPopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { useLotteryV3Store } from "~~/store/modules/lottery-v3";

const props = withDefaults(
  defineProps<{
    show: boolean;
    btnTitle?: string;
  }>(),
  {
    show: false,
  }
);

const emit = defineEmits(["update:show", "confirm"]);

const lotteryStore = useLotteryV3Store();

const isZg = computed(() => {
  return (
    lotteryStore.$state.currentPeriodBdcDrawEnable == 1 ||
    lotteryStore.$state.registerInviteUserCount > 0
  );
});

onMounted(() => {});
onBeforeUnmount(() => {});

// 确认
const confirm = () => {
  emit("confirm");
  emit("update:show", false);
};

// 关闭弹窗
const closePopup = () => {
  emit("update:show", false);
};
</script>
<style lang="scss" scoped>
.box {
  border-radius: 12 * 2px;
  background-color: #fff;

  &-top {
    padding: 15 * 2px 15 * 2px 12 * 2px 15 * 2px;
    justify-content: center;
    flex-direction: column;
    &-img {
      width: 40 * 2px;
      height: 40 * 2px;
      margin-bottom: 12 * 2px;
    }
    &-title {
      color: #141924;
      font-size: 15 * 2px;
      font-weight: 590;
    }
  }
  &-center {
    margin: 0 * 2px 15 * 2px 12 * 2px 15 * 2px;
    padding: 8 * 2px;
    border: 0.5px solid rgba(115, 119, 128, 0.15);
    border-radius: 8 * 2px;

    &-title {
      color: #141924;
      font-size: 13 * 2px;
      font-weight: 400;
      margin-bottom: 10 * 2px;
    }
    &-desc {
      color: #999da7;
      font-size: 13 * 2px;
      font-weight: 400;
      margin-bottom: 10 * 2px;

      &-icon {
        width: 8 * 2px;
        height: 8 * 2px;
        margin: 0 6 * 2px;
      }
    }
  }
  &-bottom {
    justify-content: center;
    border-radius: 6 * 2px;
    background: linear-gradient(
      90deg,
      rgba(255, 155, 1, 0) 0%,
      rgba(255, 155, 1, 0.14) 50.33%,
      rgba(255, 155, 1, 0) 100%
    );
    height: 36 * 2px;
    line-height: 36 * 2px;
    &-img {
      width: 18 * 2px;
      height: 18 * 2px;
      margin-right: 6 * 2px;
    }
    &-text {
      color: #ff9b01;
      font-size: 12 * 2px;
      font-weight: 590;
    }

    margin-bottom: 12 * 2px;
  }

  &-footer {
    padding: 10 * 2px 15 * 2px;
    justify-content: center;
    border-top: 0.5px solid rgba(0, 0, 0, 0.1);

    &-item {
      width: 100%;
      background-color: #ff9b01;
      padding: 10 * 2px 0;
      border-radius: 6 * 2px;
      text-align: center;
      color: #fff;
      font-size: 15 * 2px;
      font-weight: 590;
    }
  }
}
.close {
  position: absolute;
  z-index: 9;
  bottom: -50 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}
</style>
